<template>
  <div class="hello">
    <kp-checkbox @kpChange="change" v-model="checkbox" :disabled="true">
      checkbox1
    </kp-checkbox>
    <kp-checkbox
      @kpChange="change"
      v-model="checkbox2"
      :indeterminate="true"
      @kpFocus="blur"
    >
      checkbox2
    </kp-checkbox>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { KpCheckbox } from "keep-ui-vue";
export default defineComponent({
  name: "KpCheckboxListDemo",
  components: {
    KpCheckbox,
  },
  setup(props, ctx) {
    console.log(props, ctx);
    const checkbox = ref(true);
    const checkbox2 = ref(false);
    return {
      checkbox,
      checkbox2,
    };
  },
  methods: {
    change(e: any) {
      console.log("change", e);
      // this.checkbox = e;
    },
    blur(e: any) {
      console.log("blur", e);
    },
  },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
